import React from 'react'
import {connect} from 'react-redux'
import {updateUserName} from '../../../actions/global'
import {Button, Card, Grid, Input, List, Tag, Loading, Table, Modal} from '@hi-ui/hiui/es'
import '../layer.css'
import ReactECharts from 'echarts-for-react';
import "echarts/extension/bmap/bmap"
import {messageModal} from '../../../common/date'
import {
    getUserTotal,
    getCategoryFreq,
    checkUser,
    getUserBaseInfo,
    getClosePostionList,
    getPostionFreq,
    getCurrentTrace,
    getAllHeatMap,
    getAllTrace
} from '../action/index'

const {Row, Col} = Grid


class Panel extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            totalUser: '',
            userId: '',
            postionLat: '',
            postionLon: '',
            candidatePostion: [],
            postionModalShow: false,

            checkinFreq: '',

            userCategory: [],
            userFriends: [],
            categoryFreq: {
                name: [],
                freq: [],
            },
            currentPostionFreq: {
                all: [],
                allfreq: {},
                person: [],
                personFreq: {}
            },
            currentTrace: [],
            allTrace: [],
            allHeatMap: []
        }

        this.columns = [
            {title: '地点ID', dataKey: 'venueId', key: '1'},
            {title: '类型集合', dataKey: 'venueCategory', key: '2'},
            {
                title: '经纬度',
                width: 200,
                key: '3',
                render: (text, row, index) => {
                    return `(${row.lat},${row.lon})`
                }
            },
            {title: '到访频率', dataKey: 'frequency', width: 80, key: '4'},
            {
                title: '选择',
                width: 80,
                key: '5',
                render: (text, row, index) => {
                    return <Button type="success" appearance="link" icon="check-circle" onClick={() => {
                        this.setState({
                            postionLon: row.lon,
                            postionLat: row.lat,
                            postionModalShow: false
                        })
                        this.currentPostionFreqLoadAll(row.lon, row.lat)
                        this.currentPostionFreqLoadPerson(row.lon, row.lat)
                        this.fgetCurrentTrace(row.lon, row.lat)
                    }}/>
                }
            }
        ]
    }


    async componentDidMount() {
        this.fgetUserTotal()
        this.fgetCategoryFreq()
        this.fgetAllHeatMap()
        this.fgetAllTrace()
    }

    categoryChart() {
        const {categoryFreq} = this.state
        return {
            title: {
                text: '地区主题类型及对应访问频次分布',
                subtext: '可停靠获取信息，滚动缩放'
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                x: 60,
                y: 60,
                x2: 10,
                y2: 25,
                borderWidth: 2
            },
            xAxis: {
                data: categoryFreq.name,
                axisLabel: {
                    inside: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999'
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#83bff6'
                            }, {
                                offset: 0.6, color: '#188df0'
                            }, {
                                offset: 1, color: '#188df0'
                            }],
                            global: false
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#2378f7'
                                }, {
                                    offset: 0.6, color: '#8B4789'
                                }, {
                                    offset: 1, color: '#2378f7'
                                }],
                                global: false
                            }
                        }
                    },
                    data: categoryFreq.freq
                }
            ]
        }
    }

    postionFreq() {
        const {currentPostionFreq} = this.state
        var personData = []
        if (currentPostionFreq.person.length > 0) {
            personData = [
                [
                    {
                        name: '个人活动范围',
                        xAxis: 'min',
                        yAxis: 'min'
                    },
                    {
                        xAxis: 'max',
                        yAxis: 'max'
                    }
                ]
            ]
        }
        // 到时候放在action
        var mapdata = new Map();
        mapdata.set('105.2172.7', 9966);

        return {
            title: {
                text: '当前位置范围全员/个人到访频率',
                subtext: '数据源: foursqure NY'
            },
            grid: {
                x: 20,
                y: 60,
                x2: 20,
                y2: 5,
                containLabel: true
            },
            tooltip: {
                // trigger: 'axis',
                showDelay: 0,
                formatter: function (params) {
                    if (params.value.length > 1) {
                        var freq = currentPostionFreq.allFreq[params.value[0] + ':' + params.value[1]]
                        if (freq === undefined) {
                            freq = currentPostionFreq.personFreq[params.value[0] + ':' + params.value[1]]
                        }
                        return (
                            'Freq: ' +
                            freq +
                            ' 次<br/>' +
                            params.value[0] +
                            '°,' +
                            params.value[1] +
                            '°'
                        );
                    } else {
                        return (
                            params.seriesName +
                            ' :<br/>' +
                            params.name +
                            ' : ' +
                            params.value +
                            'kg '
                        );
                    }
                },
                axisPointer: {
                    show: true,
                    type: 'cross',
                    lineStyle: {
                        type: 'dashed',
                        width: 1
                    }
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {},
                    brush: {
                        type: ['rect', 'polygon', 'clear']
                    }
                }
            },
            brush: {},
            legend: {
                data: ['全员', '个人'],
                left: 'center',
                top: 10
            },
            xAxis: [
                {
                    type: 'value',
                    scale: true,
                    axisLabel: {
                        formatter: '{value}°'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    axisLabel: {
                        formatter: '{value}°'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '个人',
                    type: 'scatter',
                    emphasis: {
                        focus: 'series'
                    },
                    // prettier-ignore
                    data: currentPostionFreq.person,
                    markArea: {
                        silent: true,
                        itemStyle: {
                            color: 'transparent',
                            borderWidth: 1,
                            borderType: 'dashed'
                        },
                        data: personData
                    },
                },
                {
                    name: '全员',
                    type: 'scatter',
                    emphasis: {
                        focus: 'series'
                    },
                    // prettier-ignore
                    data: currentPostionFreq.all,
                    markArea: {
                        silent: true,
                        itemStyle: {
                            color: 'transparent',
                            borderWidth: 1,
                            borderType: 'dashed'
                        },
                        data: [
                            [
                                {
                                    name: '全员活动范围',
                                    xAxis: 'min',
                                    yAxis: 'min'
                                },
                                {
                                    xAxis: 'max',
                                    yAxis: 'max'
                                }
                            ]
                        ]
                    },
                }
            ]
        };
    }

    postionTrace() {
        const {currentTrace} = this.state
        return {
            bmap: {
                center: [-73.9792, 40.7695],
                zoom: 11,
                roam: true,
                mapStyle: {
                    styleJson: [
                        {
                            featureType: 'water',
                            elementType: 'all',
                            stylers: {
                                color: '#0997F7'
                            }
                        },

                        {
                            featureType: 'arterial',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#CCCCCC'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry.stroke',
                            stylers: {
                                color: '#097F09'
                            }
                        },
                        {
                            featureType: 'local',
                            elementType: 'geometry',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'geometry.stroke',
                            stylers: {
                                color: '#08304b'
                            }
                        },
                        {
                            featureType: 'subway',
                            elementType: 'geometry',
                            stylers: {
                                lightness: -70
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'all',
                            elementType: 'labels.text.fill',
                            stylers: {
                                color: '#857f7f'
                            }
                        },
                        {
                            featureType: 'all',
                            elementType: 'labels.text.stroke',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'geometry',
                            stylers: {
                                color: '#022338'
                            }
                        },
                        {
                            featureType: 'green',
                            elementType: 'geometry',
                            stylers: {
                                color: '#38B751'
                            }
                        },
                        {
                            featureType: 'boundary',
                            elementType: 'all',
                            stylers: {
                                color: '#465b6c'
                            }
                        },
                        {
                            featureType: 'manmade',
                            elementType: 'all',
                            stylers: {
                                color: '#022338'
                            }
                        },
                        {
                            featureType: 'label',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        }
                    ]
                }
            },
            title: {
                text: '当前范围内全员/个人轨迹',
                subtext: '不同颜色代表不同用户',
                borderWidth: 2,
                borderColor: '#cdcbcb',
                borderRadius: 5
            },
            series: [
                {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: currentTrace,
                    silent: true,
                    lineStyle: {
                        // color: '#c23531',
                        // color: 'rgb(200, 35, 45)',
                        opacity: 0.2,
                        width: 1
                    },
                    progressiveThreshold: 500,
                    progressive: 200
                },
                {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: currentTrace,
                    lineStyle: {
                        width: 0
                    },
                    effect: {
                        constantSpeed: 20,
                        show: true,
                        trailLength: 0.1,
                        symbolSize: 1.5
                    },
                    zlevel: 1
                }
            ]
        }
    }

    postionAllTrace() {
        const {allTrace} = this.state
        return {
            bmap: {
                center: [-73.9792, 40.7695],
                zoom: 11,
                roam: true,
                mapStyle: {
                    styleJson: [
                        {
                            featureType: 'water',
                            elementType: 'all',
                            stylers: {
                                color: '#0997F7'
                            }
                        },

                        {
                            featureType: 'arterial',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#CCCCCC'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry.stroke',
                            stylers: {
                                color: '#097F09'
                            }
                        },
                        {
                            featureType: 'local',
                            elementType: 'geometry',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'geometry.stroke',
                            stylers: {
                                color: '#08304b'
                            }
                        },
                        {
                            featureType: 'subway',
                            elementType: 'geometry',
                            stylers: {
                                lightness: -70
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'all',
                            elementType: 'labels.text.fill',
                            stylers: {
                                color: '#857f7f'
                            }
                        },
                        {
                            featureType: 'all',
                            elementType: 'labels.text.stroke',
                            stylers: {
                                color: '#4782DB'
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'geometry',
                            stylers: {
                                color: '#022338'
                            }
                        },
                        {
                            featureType: 'green',
                            elementType: 'geometry',
                            stylers: {
                                color: '#38B751'
                            }
                        },
                        {
                            featureType: 'boundary',
                            elementType: 'all',
                            stylers: {
                                color: '#465b6c'
                            }
                        },
                        {
                            featureType: 'manmade',
                            elementType: 'all',
                            stylers: {
                                color: '#022338'
                            }
                        },
                        {
                            featureType: 'label',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        }
                    ]
                }
            },
            title: {
                text: '当前范围内全员/个人轨迹',
                subtext: '不同颜色代表不同用户',
                borderWidth: 2,
                borderColor: '#cdcbcb',
                borderRadius: 5
            },
            series: [
                {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: allTrace,
                    silent: true,
                    lineStyle: {
                        // color: '#c23531',
                        // color: 'rgb(200, 35, 45)',
                        opacity: 0.2,
                        width: 1
                    },
                    progressiveThreshold: 500,
                    progressive: 200
                },
                {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: allTrace,
                    lineStyle: {
                        width: 0
                    },
                    effect: {
                        constantSpeed: 20,
                        show: true,
                        trailLength: 0.1,
                        symbolSize: 1.5
                    },
                    zlevel: 1
                }
            ]
        }
    }

    heatMapAllFreq() {
        const {allHeatMap} = this.state
        return {
            animation: false,
            bmap: {
                center: [-73.9792, 40.7685],
                zoom: 13,
                roam: true
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            title: {
                text: '全员签到热力图',
                subtext: '不同颜色代表不同频率',
                borderWidth: 2,
                borderColor: '#cdcbcb',
                borderRadius: 5
            },
            series: [
                {
                    type: 'heatmap',
                    coordinateSystem: 'bmap',
                    data: allHeatMap,
                    pointSize: 5,
                    blurSize: 6
                }
            ]
        }
    }

    currentPostionFreqLoadAll(lon, lat) {
        getPostionFreq({lat: lat, lon: lon, userId: null}).then(res => {
            if (res.code === 200) {
                this.setState({
                    currentPostionFreq: {
                        all: res.data.postions,
                        allFreq: res.data.freq,
                        person: this.state.currentPostionFreq.person,
                        personFreq: this.state.currentPostionFreq.personFreq
                    }
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    currentPostionFreqLoadPerson(lon = 0, lat = 0) {
        const {userId, postionLat, postionLon} = this.state
        let latt = lon + lat === 0 ? postionLat : lat
        let lonn = lon + lat === 0 ? postionLon : lon
        if (!/^[+-]?(0|([1-9]\d{0,3}))(\.\d{1,7})?$/.test(latt)) {
            return
        }
        if (!/^[+-]?(0|([1-9]\d{0,3}))(\.\d{1,7})?$/.test(lonn)) {
            return
        }
        if (!latt || !lonn || Math.abs(latt) > 180 || Math.abs(lonn) > 180) {
            return
        }
        if (!userId || userId < 1) {
            return
        }
        getPostionFreq({lat: latt, lon: lonn, userId}).then(res => {
            console.log('currentPostionFreqLoadPerson', res)
            if (res.code === 200) {
                this.setState({
                    currentPostionFreq: {
                        person: res.data.postions,
                        personFreq: res.data.freq,
                        all: this.state.currentPostionFreq.all,
                        allFreq: this.state.currentPostionFreq.allFreq
                    }
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }


    fgetUserTotal() {
        getUserTotal().then(res => {
            if (res.code === 200) {
                this.setState({
                    totalUser: res.data
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    fgetCategoryFreq() {
        getCategoryFreq().then(res => {
            if (res.code === 200) {
                this.setState({
                    categoryFreq: {
                        name: res.data.key1,
                        freq: res.data.val2
                    }
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    fgetUserId() {
        const {userId} = this.state
        if (!userId || userId < 1) {
            messageModal('error', '请输入正确ID号')
            return
        }

        //用户id校验
        checkUser(userId).then(res => {
            if (res.code === 200) {
                this.props.updateUserName(userId)
                this.fgetUserBaseInfo()
                this.currentPostionFreqLoadPerson()
            } else {
                messageModal('warning', res.message)
                this.setState({
                    userId: ''
                })
            }
        }).finally((err) => {

        })
    }

    fgetUserPostion() {
        const {postionLat, postionLon} = this.state
        if (!/^[+-]?(0|([1-9]\d{0,3}))(\.\d{1,7})?$/.test(postionLon)) {
            messageModal('warning', '经度:整数3位内,小数7位内')
            this.setState({postionLon: ''})
            return
        }
        if (!/^[+-]?(0|([1-9]\d{0,3}))(\.\d{1,7})?$/.test(postionLon)) {
            messageModal('warning', '纬度:整数3位内,小数7位内')
            this.setState({postionLat: ''})
            return
        }
        if (!postionLat || !postionLon || Math.abs(postionLat) > 180 || Math.abs(postionLon) > 180) {
            messageModal('error', '请输入合理范围内经纬度')
            return
        }

        getClosePostionList({lat: postionLat, lon: postionLon}).then(res => {
            if (res.code === 200) {
                this.setState({
                    candidatePostion: res.data
                })
                //返回最近5个地标
                this.setState({
                    postionModalShow: true
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    postionModal() {
        return <Modal
            title="最近位置匹配"
            size={"large"}
            closeable={false}
            visible={this.state.postionModalShow}
            style={{borderRadius: '5px', opacity: 0.8, backgroundColor: '#ffffff'}}
            onCancel={() => {
                this.setState({
                    postionModalShow: false
                })
            }}
            footer={null}>
            <Table columns={this.columns} data={this.state.candidatePostion} size={"small"}/>
        </Modal>
    }

    fgetUserBaseInfo() {
        const {userId} = this.state
        getUserBaseInfo(userId).then(res => {
            if (res.code === 200) {
                this.setState({
                    userCategory: [{extra: res.data.userCategory}],
                    userFriends: [{extra: res.data.userFriends}],
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    fgetCurrentTrace(lon, lat) {
        getCurrentTrace({lat: lat, lon: lon}).then(res => {
            if (res.code === 200) {
                this.setState({
                    currentTrace: res.data
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    fgetAllTrace() {
        getAllTrace().then(res => {
            if (res.code === 200) {
                this.setState({
                    allTrace: res.data
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    fgetAllHeatMap() {
        getAllHeatMap().then(res => {
            if (res.code === 200) {
                this.setState({
                    allHeatMap: res.data
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }


    render() {
        const {userCategory, userFriends, totalUser, userId, categoryFreq, checkinFreq} = this.state
        return (
            <div className={'panelBody'}>
                <div className={'panelQuery'}>
                    <Row justify='center' gutter={true}>
                        <Col span={6}>
                            <Input placeholder="输入用户ID号"
                                   type={"tel"}
                                   clearable={true}
                                   value={userId}
                                   onChange={(e, val) => {
                                       this.setState({userId: val})
                                   }}
                                   bordered={false}
                                   style={{width: 200, height: 34, marginRight: '10px'}}/>
                            <Button type="danger"
                                    style={{outline: 'none', border: 'none'}}
                                    onClick={() => {
                                        this.fgetUserId()
                                    }}>
                                模拟用户
                            </Button>

                        </Col>
                        <Col span={8}>
                            <Input placeholder="输入近似纬度"
                                   clearable={true}
                                   bordered={false}
                                   value={this.state.postionLat}
                                   style={{width: 150, height: 34, marginRight: '10px'}}
                                   onChange={(e, val) => {
                                       console.log(val.charAt(val.length - 1))
                                       if (!/^[0-9]|\.|[-+]$/.test(val.charAt(val.length - 1))) {
                                           messageModal('warning', '纬度:出现不相关字符')
                                       }
                                       this.setState({postionLat: val})
                                   }}/>
                            <Input placeholder="输入近似经度"
                                   clearable={true}
                                   bordered={false}
                                   value={this.state.postionLon}
                                   style={{width: 150, height: 34, marginRight: '10px'}}
                                   onChange={(e, val) => {
                                       if (!/^[0-9]|\.|[-+]$/.test(val.charAt(val.length - 1))) {
                                           messageModal('warning', '经度:出现不相关字符')
                                       }
                                       this.setState({postionLon: val})
                                   }}/>
                            <Button type="line"
                                    style={{outline: 'none', border: 'none'}}
                                    onClick={() => {
                                        this.fgetUserPostion()
                                    }}>
                                地点模拟
                            </Button>

                        </Col>
                        <Col span={6}>
                            <Input placeholder="模拟签到次数"
                                   type={"tel"}
                                   clearable={true}
                                   value={checkinFreq}
                                   bordered={false}
                                   onChange={(e, val) => {
                                       this.setState({checkinFreq: val})
                                   }}
                                   style={{width: 200, height: 34, marginRight: '10px'}}/>
                            <Button type="success"
                                    style={{outline: 'none', border: 'none'}}
                                    onClick={() => {
                                        alert(666)
                                        //  this.props.updateUserName('666666')
                                    }}>
                                签到模拟
                            </Button>
                        </Col>
                    </Row>
                </div>
                <div className={'panelBase'}>
                    <Row gutter={true}>
                        <Col span={11}>
                            <div className={'panelBase_1'}>
                                <div className={'panelBase_1_content'}>
                                    <Tag style={{marginTop: '10px'}} type="success" shape="square">用户爱好</Tag>
                                    <div className={'x4x'}>
                                        <List
                                            data={userCategory}
                                            type={'default'}
                                            bordered={false}
                                            hoverable={true}
                                            split={false}
                                            emptyText={'暂无数据（请指定当前模拟用户后查看）'}
                                            renderItem={dataItem => {
                                                const {Item} = List
                                                return <Item {...dataItem} />
                                            }}
                                        />
                                    </div>
                                </div>
                                <div className={'panelBase_1_content'}>
                                    <Tag style={{marginTop: '10px'}} shape="square">用户好友</Tag>
                                    <div className={'x4x'}>
                                        <List
                                            data={userFriends}
                                            type={'default'}
                                            bordered={false}
                                            emptyText={'暂无数据（请指定当前模拟用户后查看）'}
                                            hoverable={true}
                                            split={false}
                                            renderItem={dataItem => {
                                                const {Item} = List
                                                return <Item {...dataItem} />
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <Col span={3}>
                            <div className={'panelBase_2'}>
                                <Card
                                    title="用户"
                                    hoverable='true'
                                    style={{color: '#4880e7', width: 160, height: 160, fontSize: 32, marginTop: '45px'}}
                                >
                                    <p><Loading visible={!totalUser}
                                                size={"small"}>{totalUser ? totalUser : ''}</Loading></p>
                                </Card>
                            </div>
                        </Col>
                        <Col span={10}>
                            <div className={'panelBase_3'}>
                                <Loading visible={!categoryFreq.name.length > 0} size={"small"}><ReactECharts
                                    style={{height: "250px", width: '585px'}}
                                    option={this.categoryChart()}/> </Loading>
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className={'panelPicture'}>
                    <Row gutter={true}>
                        <Col span={12}>
                            <div className={'Pitem'}>
                                <Loading visible={false} size={"small"}>
                                    <ReactECharts
                                        style={{height: "350px", width: '703px', position: 'relative'}}
                                        option={this.postionFreq()}/>
                                </Loading>
                            </div>
                        </Col>
                        <Col span={12}>
                            <div className={'Pitem'}>
                                <ReactECharts
                                    style={{height: "350px", width: '703px', position: 'relative'}}
                                    option={this.postionTrace()}/>
                            </div>
                        </Col>
                    </Row>
                    <Row gutter={true}>
                        <Col span={12}>
                            <div className={'Pitem'}>
                                <ReactECharts
                                    style={{height: "350px", width: '703px', position: 'relative'}}
                                    option={this.heatMapAllFreq()}/>
                            </div>
                        </Col>
                        <Col span={12}>
                            <div className={'Pitem'}>
                                <ReactECharts
                                    style={{height: "350px", width: '703px', position: 'relative'}}
                                    option={this.postionAllTrace()}/>
                            </div>
                        </Col>
                    </Row>
                </div>
                {this.postionModal()}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    discounthouseManagement: state.discounthouseManagement
})

export default connect(mapStateToProps, {
    updateUserName
})(Panel)
